<script lang="ts">
import { defineComponent, computed, unref } from "vue";
import { BackTop } from "ant-design-vue";
import { useRootSetting } from "/@/hooks/setting/UseRootSetting";
import { useHeaderSetting } from "/@/hooks/setting/UseHeaderSetting";
import { useDesign } from "/@/hooks/web/UseDesign";
import { useUserStoreWithOut } from "/@/store/modules/User";
import { SettingButtonPositionEnum } from "/@/enums/AppEnum";
import { createAsyncComponent } from "/@/utils/factory/CreateAsyncComponent";
import SessionTimeoutLogin from "/@/views/sys/login/SessionTimeoutLogin.vue";

export default defineComponent({
  name: "LayoutFeatures",
  components: {
    BackTop,
    LayoutLockPage: createAsyncComponent(() => import("/@/views/sys/lock/index.vue")),
    SettingDrawer: createAsyncComponent(() => import("/@/layouts/default/setting/index.vue")),
    SessionTimeoutLogin
  },
  setup() {
    const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
      useRootSetting();
    const userStore = useUserStoreWithOut();
    const { prefixCls } = useDesign("setting-drawer-feature");
    const { getShowHeader } = useHeaderSetting();

    const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);

    const getIsFixedSettingDrawer = computed(() => {
      if (!unref(getShowSettingButton)) {
        return false;
      }
      const settingButtonPosition = unref(getSettingButtonPosition);

      if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
        return !unref(getShowHeader) || unref(getFullContent);
      }
      return settingButtonPosition === SettingButtonPositionEnum.FIXED;
    });

    return {
      getTarget: () => document.body,
      getUseOpenBackTop,
      getIsFixedSettingDrawer,
      prefixCls,
      getIsSessionTimeout
    };
  }
});
</script>

<template>
  <LayoutLockPage />
  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature';

.@{prefix-cls} {
  position: absolute;
  top: 45%;
  right: 0;
  z-index: 10;
  display: flex;
  padding: 10px;
  color: @white;
  cursor: pointer;
  background-color: @primary-color;
  border-radius: 6px 0 0 6px;
  justify-content: center;
  align-items: center;

  svg {
    width: 1em;
    height: 1em;
  }
}
</style>
